<template>
    <div id="slideshow">
      <div class="context">
        <span @mouseover="clean_i()" @mouseout="set_i()" v-for="(item, index) in items" :key="index"
          :class="change_item(index + 1)">
          <a href="#"><img :src="item" alt=""></a>
        </span>
      </div>
      <div class="icon">
        <div v-for="(item) in items.length" :key="item" :class="show == item ? 'icon_active' : null" @click="change(item)">
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'slideshow',
    data() {
      return {
        show: 1,
        items: ['/img/other/banner1压缩机类目.jpg', '/img/other/banner2风扇类目.jpg', '/img/other/banner4电磁阀类目.jpg'],
        interval: null
      }
    },
    computed: {
  
    },
    methods: {
      change(n) {
        this.show = n;
      },
      change_item(n) {
        let r = 'show';
        this.show == n ? r = 'show' : (this.show < n ? r = 'right' : r = 'left')
        return r
      },
      clean_i() {
        clearInterval(this.interval)
      },
      set_i() {
        this.interval = setInterval(() => {
          if (this.show < this.items.length) {
            this.show++
          } else {
            this.show = 1
          }
        }, 4000);
      }
    },
    mounted() {
      this.set_i()
    }
  };
  </script>
  
  <style lang="less" scoped>
  #slideshow {
    position: relative;
  }
  
  .context {
    width: 100%;
    position: relative;
    background: yellow;
    overflow: hidden;
    span {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      display: inline-block;
    }
    a{
      height: 100%;
      position: relative;
    }
    img{
      height: 100%;
    }
  }
  
  .left {
    left: -100%;
    transition: .5s;
  }
  
  .show {
    left: 0;
    transition: .5s;
  }
  
  .right {
    left: 100%;
    transition: .5s;
  }
  
  .icon {
    position: absolute;
    bottom: 50px;
    right: 100px;
    color: white;
    div {
      width: 30px;
      height: 5px;
      margin: 10px;
      opacity: .6;
      background: white;
      transition: .5s;
    }
  }
  
  .icon_active {
    width: 45px !important;
    margin-left: -5px !important;
    opacity: 1 !important;
  }
  @media screen and (min-width: 1200px){
    .context{
      height: 400px;
      a{
        left: calc(50% - 960px);
      }
    }
  }
  @media screen and (max-width: 1280px){
    .context{
      height: 300px;
      a{
        left: calc(50% - 640px);
      }
    }
  }
  @media screen and (max-width: 985px) and (max-width: 1280px){
    .context{
      height: 240px;
      a{
        left: calc( 50% - 576px );
      }
    }
  }
  @media screen  and (max-width: 760px){
    .context{
      height: 180px;
      a{
        left: calc( 50% - 432px );
      }
    }
    .icon{
      right: 30px;
      bottom: 25px;
    }
  }
  </style>